<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL 绘制一个圆</title>
</head>

<body>
    <canvas id="webglCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('webglCanvas');
        const gl = canvas.getContext('webgl');


        // 顶点着色器源代码  
        const vertexShaderSource = `  
        attribute vec2 a_position; 
        attribute vec2 a_texCoord; 
        varying vec2 vTexCoord; 
        
        void main() {  
            gl_Position = vec4(a_position, 0.0, 1.0);
            vTexCoord = a_texCoord;
        }
        `;

        // 片段着色器源代码  
        const fragmentShaderSource = `
        precision mediump float;  
        uniform sampler2D uSampler;
        varying vec2 vTexCoord;
        
        void main() {
            vec4 color = texture2D(uSampler,vTexCoord);
            gl_FragColor = color;
        }
        `;

        // 创建着色器程序  
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('Error compiling shader:', gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }

            return shader;
        }

        // 创建并链接着色器程序  
        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);

            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                console.error('Error linking program:', gl.getProgramInfoLog(program));
                gl.deleteProgram(program);
                return null;
            }

            return program;
        }

        // 设置顶点数据  
        const vertices = new Float32Array([
            -0.5, -0.5, // 左下角  
            0.5, -0.5, // 右下角  
            -0.5, 0.5,   // 顶部 
            0.5, 0.5   // 顶部  

        ]);

        // 创建顶点缓冲区  
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        // 获取顶点着色器中的a_position属性位置  
        const program = createProgram(gl, createShader(gl, gl.VERTEX_SHADER, vertexShaderSource), createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource));
        gl.useProgram(program);

        const aPosition = gl.getAttribLocation(program, 'a_position');
        gl.enableVertexAttribArray(aPosition);
        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

        // let u_resolution = gl.getUniformLocation(program, 'u_resolution');
        // gl.uniform2fv(u_resolution, [400.0, 400.0]);

        const a_texCoord = gl.getAttribLocation(program, 'a_texCoord');
        gl.enableVertexAttribArray(a_texCoord);
        const texCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0]), gl.STATIC_DRAW);
        gl.vertexAttribPointer(a_texCoord, 2, gl.FLOAT, false, 0, 0);


        var texture = gl.createTexture();
        var samplerLocation = gl.getUniformLocation(program, 'uSampler');
        var image = new Image();
        image.crossOrigin = "anonymous";
        image.onload = function () {
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
            gl.uniform1i(samplerLocation, 0);
            // 清除颜色缓冲和深度缓冲  
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // 绘制四边形到帧缓冲对象  
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        };
        image.src = 'http://192.168.92.1:9000/test.png'; // 替换为你的图像路径  



        // // 清除颜色缓冲和深度缓冲  
        // gl.clearColor(0.0, 0.0, 0.0, 1.0);
        // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        // // 绘制四边形到帧缓冲对象
        // gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

        // // 清除画布并绘制三角形
        // gl.clearColor(0.0, 0.0, 0.0, 1.0);
        // gl.clear(gl.COLOR_BUFFER_BIT);
        // gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length);
    </script>
</body>

</html>